<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BreakoutIframe</title>
    <style type="text/css">
        .leftDiv {
            display: block;
            width: 240px;
            padding: 10px;
        }
        .rightDiv {
            display: block;
            position: absolute;
            padding:10px;
            top: 70px;
            left: 240px;
            width: 60%;
            height: 60%;
        }
    </style>
</head>
<body>
    <h1>这个页面还是做得有点丑啊！努力从其他框架汲取知识吧</h1>
    <div class="leftDiv">
        <input type="button" name="" value="加载Iframe" style="height: 30px; width: 130px;" onclick="loadIframe()">
    </div>
    <div class="rightDiv">
        <!-- HTML <iframe> 标签 : http://www.w3school.com.cn/tags/tag_iframe.asp -->
        <iframe id="id_iframe" src="" frameborder="1" 
            height="100%" width="100%" scrolling="yes"></iframe>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            // alert(111);
        };
        function loadIframe(){
            var iframe = document.getElementById('id_iframe');
            iframe.src="insideIframeDemo01.html";
        }

    </script>
</body>
</html>